<template>
  <div class="vip-recharge-container">
    <div class="vip-recharge-header">
      <h1>VIP会员充值</h1>
      <p>选择适合您的VIP套餐，享受尊贵特权！</p>
      <div v-if="userVIPStatus.isVIP" class="current-vip-status">
        <span class="current-vip-badge">✨ 当前已是VIP会员</span>
        <span class="current-vip-expiry">有效期至: {{ userVIPStatus.expiry }}</span>
      </div>
    </div>

    <!-- VIP特权说明 -->
    <div class="vip-benefits-showcase">
      <h2>VIP特权</h2>
      <div class="benefits-grid">
        <div class="benefit-item">
          <div class="benefit-icon">👑</div>
          <div class="benefit-name">专属标识</div>
          <div class="benefit-desc">个人主页显示尊贵VIP徽章</div>
        </div>
        <div class="benefit-item">
          <div class="benefit-icon">🎮</div>
          <div class="benefit-name">全难度解锁</div>
          <div class="benefit-desc">畅玩所有游戏难度等级</div>
        </div>
        <div class="benefit-item">
          <div class="benefit-icon">🚫</div>
          <div class="benefit-name">无广告体验</div>
          <div class="benefit-desc">享受纯净游戏环境</div>
        </div>
        <div class="benefit-item">
          <div class="benefit-icon">🔍</div>
          <div class="benefit-name">优先体验</div>
          <div class="benefit-desc">抢先体验新游戏和功能</div>
        </div>
        <div class="benefit-item">
          <div class="benefit-icon">🎨</div>
          <div class="benefit-name">个性设置</div>
          <div class="benefit-desc">更多游戏界面个性化选项</div>
        </div>
        <div class="benefit-item">
          <div class="benefit-icon">🎁</div>
          <div class="benefit-name">专属礼包</div>
          <div class="benefit-desc">定期获得独家游戏礼包</div>
        </div>
      </div>
    </div>

    <!-- VIP套餐选择 -->
    <div class="vip-packages">
      <h2>选择套餐</h2>
      <div class="packages-grid">
        <div 
          v-for="pkg in vipPackages" 
          :key="pkg.id"
          :class="['package-card', { selected: selectedPackage.id === pkg.id }]"
          @click="selectPackage(pkg)"
        >
          <div class="package-name">{{ pkg.name }}</div>
          <div class="package-price">{{ pkg.price }} 元</div>
          <div class="package-duration">{{ pkg.days }} 天</div>
          <div class="package-discount" v-if="pkg.discount">
            {{ pkg.discount }}折优惠
          </div>
          <div class="package-features">
            <ul>
              <li v-for="feature in pkg.features" :key="feature">{{ feature }}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- 支付方式选择 -->
    <div class="payment-methods">
      <h2>支付方式</h2>
      <div class="methods-grid">
        <div 
          v-for="method in paymentMethods" 
          :key="method.id"
          :class="['payment-method', { selected: selectedPayment.id === method.id }]"
          @click="selectPaymentMethod(method)"
        >
          <div class="method-icon">{{ method.icon }}</div>
          <div class="method-name">{{ method.name }}</div>
        </div>
      </div>
    </div>

    <!-- 优惠码输入 -->
    <div class="discount-code-section" v-if="!isProcessingPayment">
      <h3>使用优惠码</h3>
      <div class="discount-input-group">
        <input 
          type="text" 
          v-model="discountCode" 
          placeholder="输入优惠码" 
          class="discount-input"
          @keyup.enter="applyDiscount"
        >
        <button class="apply-discount-button" @click="applyDiscount" :disabled="!discountCode.trim()">
          应用
        </button>
      </div>
      <div v-if="discountApplied" class="discount-applied-message">
        ✅ 优惠码已应用，节省 {{ discountAmount }} 元
      </div>
      <div v-if="invalidDiscount" class="invalid-discount-message">
        ❌ 无效的优惠码
      </div>
    </div>

    <!-- 订单摘要 -->
    <div class="order-summary">
      <h2>订单摘要</h2>
      <div class="summary-details">
        <div class="summary-item">
          <span>套餐</span>
          <span>{{ selectedPackage.name }}</span>
        </div>
        <div class="summary-item">
          <span>时长</span>
          <span>{{ selectedPackage.days }} 天</span>
        </div>
        <div class="summary-item">
          <span>支付方式</span>
          <span>{{ selectedPayment.name }}</span>
        </div>
        <div v-if="discountApplied" class="summary-item discount">
          <span>优惠减免</span>
          <span class="discount-amount">-{{ discountAmount }} 元</span>
        </div>
        <div class="summary-item total">
          <span>应付金额</span>
          <span class="total-price">{{ finalPrice }} 元</span>
        </div>
      </div>
    </div>

    <!-- 支付流程指示器 -->
    <div class="payment-steps-indicator">
      <div class="step" :class="{ active: currentStep === 1 }">选择套餐</div>
      <div class="step-divider"></div>
      <div class="step" :class="{ active: currentStep === 2 }">选择支付方式</div>
      <div class="step-divider"></div>
      <div class="step" :class="{ active: currentStep === 3 }">确认支付</div>
    </div>

    <!-- 支付操作 -->
    <div class="payment-actions">
      <button v-if="currentStep > 1" class="back-button" @click="goBackStep" :disabled="isProcessingPayment">
        返回
      </button>
      <button v-if="currentStep < 3" class="next-button" @click="goNextStep" :disabled="isProcessingPayment">
        下一步
      </button>
      <button v-if="currentStep === 3" class="recharge-button" @click="processPayment" :disabled="isProcessingPayment">
        <span v-if="!isProcessingPayment">立即充值</span>
        <span v-if="isProcessingPayment" class="processing-spinner">⏳ 支付处理中...</span>
      </button>
    </div>

    <!-- 消息提示 -->
    <div v-if="error" class="error-message">{{ error }}</div>
    <div v-if="success" class="success-message">{{ success }}</div>

    <!-- 支付成功弹窗 -->
    <div v-if="showSuccessModal" class="modal-overlay" @click="closeModal">
      <div class="modal-content" @click.stop>
        <div class="success-icon">🎉</div>
        <h3>充值成功！</h3>
        <p>您已成功开通{{ selectedPackage.name }}，有效期至{{ vipExpiryDate }}</p>
        <div class="success-benefits">
          <p>✨ 您现在可以享受所有VIP特权了！</p>
        </div>
        <button class="close-button" @click="closeModal">确定</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { upgradeToVIP, isUserVIP } from '../services/UserService.js'

const router = useRouter()
const username = ref('')
const error = ref('')
const success = ref('')
const showSuccessModal = ref(false)
const vipExpiryDate = ref('')
const isProcessingPayment = ref(false)
const discountCode = ref('')
const discountApplied = ref(false)
const discountAmount = ref(0)
const invalidDiscount = ref(false)
const currentStep = ref(1)
const userVIPStatus = ref({ isVIP: false, expiry: null })

// VIP套餐数据
const vipPackages = ref([
  {
    id: 1,
    name: '月度VIP',
    price: 18,
    days: 30,
    discount: null,
    features: [
      '专属VIP标识',
      '解锁所有游戏难度',
      '无广告体验',
      '优先参与新游戏测试',
      '更多个性化设置'
    ]
  },
  {
    id: 2,
    name: '季度VIP',
    price: 45,
    days: 90,
    discount: 8.3,
    features: [
      '专属VIP标识',
      '解锁所有游戏难度',
      '无广告体验',
      '优先参与新游戏测试',
      '更多个性化设置',
      '季度专属礼包'
    ]
  },
  {
    id: 3,
    name: '年度VIP',
    price: 158,
    days: 365,
    discount: 7,
    features: [
      '专属VIP标识',
      '解锁所有游戏难度',
      '无广告体验',
      '优先参与新游戏测试',
      '更多个性化设置',
      '年度专属礼包',
      '生日特别奖励'
    ]
  }
])

// 支付方式 - 扩展更多选项
const paymentMethods = ref([
  {
    id: 1,
    name: '微信支付',
    icon: '💳'
  },
  {
    id: 2,
    name: '支付宝',
    icon: '💰'
  },
  {
    id: 3,
    name: '银行卡',
    icon: '💸'
  },
  {
    id: 4,
    name: 'PayPal',
    icon: '💵'
  },
  {
    id: 5,
    name: 'Apple Pay',
    icon: '🍎'
  }
])

// 选中的套餐和支付方式
const selectedPackage = ref(vipPackages.value[0])
const selectedPayment = ref(paymentMethods.value[0])

// 计算最终价格（应用优惠后）
const finalPrice = computed(() => {
  if (discountApplied.value) {
    return Math.max(0, selectedPackage.value.price - discountAmount.value)
  }
  return selectedPackage.value.price
})

// 选择套餐
const selectPackage = (pkg) => {
  selectedPackage.value = pkg
  // 如果已经应用了优惠码，重新计算优惠金额
  if (discountApplied.value) {
    calculateDiscount()
  }
}

// 选择支付方式
const selectPaymentMethod = (method) => {
  selectedPayment.value = method
}

// 应用优惠码
const applyDiscount = () => {
  error.value = ''
  invalidDiscount.value = false
  
  // 验证优惠码（示例：NEWVIP 减5元，VIP10 减10元）
  const code = discountCode.value.trim().toUpperCase()
  
  if (code === 'NEWVIP') {
    discountAmount.value = 5
    discountApplied.value = true
  } else if (code === 'VIP10') {
    discountAmount.value = 10
    discountApplied.value = true
  } else if (code === 'ANNUAL20') {
    if (selectedPackage.value.id === 3) { // 仅对年度套餐生效
      discountAmount.value = 20
      discountApplied.value = true
    } else {
      invalidDiscount.value = true
      error.value = '优惠码仅适用于年度VIP套餐'
    }
  } else {
    invalidDiscount.value = true
    error.value = '无效的优惠码'
  }
}

// 计算优惠金额（内部函数）
const calculateDiscount = () => {
  const code = discountCode.value.trim().toUpperCase()
  
  if (code === 'NEWVIP') {
    discountAmount.value = 5
  } else if (code === 'VIP10') {
    discountAmount.value = 10
  } else if (code === 'ANNUAL20' && selectedPackage.value.id === 3) {
    discountAmount.value = 20
  } else {
    discountApplied.value = false
    discountAmount.value = 0
  }
}

// 处理支付
const processPayment = async () => {
  error.value = ''
  success.value = ''
  isProcessingPayment.value = true
  
  try {
    // 根据支付方式显示不同的支付处理时间
    const processingTimes = {
      1: 2000, // 微信支付
      2: 1800, // 支付宝
      3: 2500, // 银行卡
      4: 3000, // PayPal
      5: 1500  // Apple Pay
    }
    
    // 模拟支付处理过程
    await new Promise(resolve => setTimeout(resolve, processingTimes[selectedPayment.value.id] || 2000))
    
    // 调用升级VIP的服务
    const result = upgradeToVIP(username.value, selectedPackage.value.days)
    
    if (result.success) {
      // 计算VIP过期日期
      const today = new Date()
      const expiryDate = new Date(today.setDate(today.getDate() + selectedPackage.value.days))
      vipExpiryDate.value = expiryDate.toLocaleDateString()
      
      // 显示成功弹窗
      showSuccessModal.value = true
    } else {
      error.value = result.message
    }
  } catch (err) {
    error.value = '支付处理过程中发生错误，请稍后重试'
    console.error('支付处理错误:', err)
  } finally {
    isProcessingPayment.value = false
  }
}

// 关闭弹窗
const closeModal = () => {
  showSuccessModal.value = false
  // 支付成功后返回个人资料页
  router.push('/profile')
}

// 导航到下一步
const goNextStep = () => {
  if (currentStep.value < 3) {
    currentStep.value++
  }
}

// 返回上一步
const goBackStep = () => {
  if (currentStep.value > 1) {
    currentStep.value--
  }
}

// 检查登录状态和VIP状态
onMounted(() => {
  const loggedIn = localStorage.getItem('isLoggedIn') === 'true'
  if (!loggedIn) {
    router.push('/login')
    return
  }
  
  // 获取用户名
  const storedUsername = localStorage.getItem('username')
  if (storedUsername) {
    username.value = storedUsername
    // 检查当前用户的VIP状态
    userVIPStatus.value = isUserVIP(username.value)
  }
})
</script>

<style scoped>
.vip-recharge-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 2rem;
  color: #fff;
  font-family: 'Arial', sans-serif;
}

.vip-recharge-header {
  text-align: center;
  margin-bottom: 3rem;
}

.vip-recharge-header h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.vip-recharge-header p {
  font-size: 1.2rem;
  opacity: 0.9;
}

/* 当前VIP状态 */
.current-vip-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 1rem;
  background: rgba(255, 215, 0, 0.15);
  border-radius: 12px;
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.current-vip-badge {
  font-weight: bold;
  color: #ffd700;
}

.current-vip-expiry {
  font-size: 0.9rem;
  opacity: 0.8;
}

/* VIP特权展示 */
.vip-benefits-showcase {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  backdrop-filter: blur(10px);
}

.vip-benefits-showcase h2 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.benefit-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  transition: transform 0.3s ease;
}

.benefit-item:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.1);
}

.benefit-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.benefit-name {
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #ffd700;
}

.benefit-desc {
  font-size: 0.9rem;
  opacity: 0.8;
}

.vip-packages, .payment-methods, .order-summary, .discount-code-section {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  backdrop-filter: blur(10px);
}

.vip-packages h2, .payment-methods h2, .order-summary h2 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
}

/* 套餐选择 */
.packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.package-card {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 237, 78, 0.05));
  border: 2px solid rgba(255, 215, 0, 0.3);
  border-radius: 12px;
  padding: 2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.package-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(255, 215, 0, 0.2);
  border-color: rgba(255, 215, 0, 0.6);
}

.package-card.selected {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 237, 78, 0.1));
  border-color: #ffd700;
  box-shadow: 0 10px 20px rgba(255, 215, 0, 0.3);
}

.package-card.selected::after {
  content: '✓';
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 30px;
  height: 30px;
  background-color: #ffd700;
  color: #333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.package-name {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #ffd700;
}

.package-price {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 0.25rem;
}

.package-duration {
  font-size: 1rem;
  opacity: 0.8;
  margin-bottom: 1rem;
}

.package-discount {
  background-color: rgba(255, 107, 107, 0.2);
  color: #ff6b6b;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: bold;
  margin-bottom: 1rem;
  display: inline-block;
}

.package-features {
  margin-top: 1rem;
}

.package-features ul {
  list-style-type: none;
  padding: 0;
}

.package-features li {
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.9rem;
}

.package-features li:before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #4ecdc4;
  font-weight: bold;
}

/* 支付方式 */
.methods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

.payment-method {
  background-color: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.payment-method:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
}

.payment-method.selected {
  background-color: rgba(255, 255, 255, 0.15);
}

/* 根据支付方式动态设置选中颜色 */
.payment-method.selected:nth-child(1) { border-color: #07C160; }
.payment-method.selected:nth-child(2) { border-color: #1677FF; }
.payment-method.selected:nth-child(3) { border-color: #9254DE; }
.payment-method.selected:nth-child(4) { border-color: #0070BA; }
.payment-method.selected:nth-child(5) { border-color: #CCCCCC; }

.method-icon {
  font-size: 1.5rem;
}

.method-name {
  font-size: 1.1rem;
  font-weight: bold;
}

/* 优惠码输入 */
.discount-code-section h3 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.discount-input-group {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.discount-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.05);
  color: white;
  font-size: 1rem;
}

.discount-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.apply-discount-button {
  padding: 0.75rem 1.5rem;
  background-color: #4ecdc4;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.apply-discount-button:hover:not(:disabled) {
  background-color: #45b7aa;
}

.apply-discount-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.discount-applied-message {
  color: #4ecdc4;
  font-weight: bold;
  padding: 0.75rem;
  background-color: rgba(78, 205, 196, 0.1);
  border-radius: 6px;
}

.invalid-discount-message {
  color: #ff6b6b;
  font-weight: bold;
  padding: 0.75rem;
  background-color: rgba(255, 107, 107, 0.1);
  border-radius: 6px;
}

/* 订单摘要 */
.summary-details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.summary-item.discount {
  color: #4ecdc4;
}

.discount-amount {
  font-weight: bold;
}

.summary-item.total {
  font-size: 1.2rem;
  font-weight: bold;
  padding-top: 1rem;
  border-bottom: none;
}

.total-price {
  color: #ffd700;
  font-size: 1.5rem;
}

/* 支付步骤指示器 */
.payment-steps-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2rem 0;
  gap: 1rem;
}

.step {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.1);
  font-weight: bold;
  transition: all 0.3s ease;
}

.step.active {
  background-color: #ffd700;
  color: #333;
}

.step-divider {
  height: 2px;
  width: 30px;
  background-color: rgba(255, 255, 255, 0.2);
}

/* 支付操作 */
.payment-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

.recharge-button {
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  color: #333;
  border: none;
  border-radius: 8px;
  padding: 1.25rem 3rem;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.recharge-button:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(255, 215, 0, 0.4);
}

.recharge-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.next-button {
  background: linear-gradient(135deg, #4ecdc4, #45b7aa);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.next-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(78, 205, 196, 0.3);
}

.next-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.back-button {
  background-color: transparent;
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.back-button:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

.back-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.processing-spinner {
  display: inline-block;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* 消息提示 */
.error-message, .success-message {
  padding: 1rem;
  border-radius: 6px;
  margin: 1rem 0;
  text-align: center;
}

.error-message {
  background-color: rgba(255, 107, 107, 0.2);
  color: #ff6b6b;
}

.success-message {
  background-color: rgba(78, 205, 196, 0.2);
  color: #4ecdc4;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-content {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 3rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  max-width: 400px;
  width: 90%;
}

.success-icon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  animation: bounce 0.5s ease;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-20px); }
  60% { transform: translateY(-10px); }
}

.modal-content h3 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.modal-content p {
  font-size: 1.1rem;
  opacity: 0.9;
  margin-bottom: 1rem;
}

.success-benefits {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 2rem;
}

.close-button {
  background-color: #4ecdc4;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.close-button:hover {
  background-color: #45b7aa;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .vip-recharge-container {
    padding: 1rem;
  }
  
  .vip-recharge-header h1 {
    font-size: 2rem;
  }
  
  .benefits-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .packages-grid {
    grid-template-columns: 1fr;
  }
  
  .methods-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .discount-input-group {
    flex-direction: column;
  }
  
  .payment-actions {
    flex-direction: column;
  }
  
  .recharge-button, .next-button, .back-button {
    width: 100%;
  }
  
  .modal-content {
    padding: 2rem;
    margin: 1rem;
  }
}

@media (max-width: 480px) {
  .benefits-grid {
    grid-template-columns: 1fr;
  }
  
  .payment-steps-indicator {
    font-size: 0.8rem;
    gap: 0.5rem;
  }
  
  .step {
    padding: 0.4rem 0.8rem;
  }
  
  .step-divider {
    width: 20px;
  }
}
</style>